<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的订阅</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/font/font-awesome.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap/switch/bootstrap-switch.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/common/common.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/easyui/easyui.css">

<!-- Stylesheets -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/css/bootstrap-extend.min.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/assets/css/site.min.css">
<!-- Plugins -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/vendor/jquery-wizard/jquery-wizard.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/v2/global/vendor/formvalidation/formValidation.css">
<!-- Fonts -->
<script src="<%=request.getContextPath() %>/v2/global/vendor/breakpoints/breakpoints.js"></script>


<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<script>
Breakpoints();
</script>
<style type="text/css">
	
</style>
</head>

<body>
	<div class="container">
	<ul class="nav nav-tabs" role="tablist">
		<li class="active"><a href="#my_order_tab" role="tab" data-toggle="tab">我的订阅</a></li>
		<li><a href="#order_tab" role="tab" data-toggle="tab">新增订阅</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane active" id="my_order_tab">
			<div class="row">
				<div class="col-lg-12">
					<h1><small>我的书籍列表</small></h1>
				</div>
				<div class="col-lg-12">
					<div class="col-lg-offset-10 col-lg-2">
						<div class="input-group">
							<input id="bname" type="text" class="form-control" placeholder="查询书名">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" onclick="queryAll()">查询</button>
								<button class="btn btn-default" type="button" onclick="initQuery()">重置</button>
							</span>
						</div>
					</div>
				</div>
				<div class="col-lg-12" style="height: 10px">
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="" style="width: 100%; height: 500px;">
						<table id="mybookes"></table>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-pane" id="order_tab">
			<div class="row">
				<div class="col-md-12">
					<!-- Panel Wizard Form -->
					<div class="panel" id="exampleWizardForm">
						<div class="panel-heading">
							<h3 class="panel-title">订阅:</h3>
						</div>
						<div class="panel-body">
							<!-- Steps -->
							<div class="steps steps-sm row" data-plugin="matchHeight"
								data-by-row="true" role="tablist">
								<div class="step col-md-4 current" data-target="#exampleAccount"
									role="tab">
									<span class="step-number">1</span>
									<div class="step-desc">
										<span class="step-title">增加方式</span>
										<p>可以从已收录书籍选取或者自定义增加新的书籍</p>
									</div>
								</div>
								<div class="step col-md-4" data-target="#exampleBilling"
									role="tab">
									<span class="step-number">2</span>
									<div class="step-desc">
										<span class="step-title">书籍信息</span>
										<p>选择新增的书籍</p>
									</div>
								</div>
								<div class="step col-md-4" data-target="#exampleGetting"
									role="tab">
									<span class="step-number">3</span>
									<div class="step-desc">
										<span class="step-title">确认</span>
										<p>新增书籍信息概览</p>
									</div>
								</div>
							</div>
							<!-- End Steps -->
							<!-- Wizard Content -->
							<div class="wizard-content">
								<div class="wizard-pane active" id="exampleAccount"
									role="tabpanel">
									<form id="exampleAccountForm">
										<div class="form-group">
											<label class="control-label" for="inputUserName">Username</label>
											<input type="text" class="form-control" id="inputUserName"
												name="username" required="required">
										</div>
										<div class="form-group">
											<label class="control-label" for="inputPassword">Password</label>
											<input type="password" class="form-control" id="inputPassword"
												name="password" required="required">
										</div>
									</form>
								</div>
								<div class="wizard-pane" id="exampleBilling" role="tabpanel">
									<form id="exampleBillingForm">
										<div class="form-group">
											<label class="control-label" for="inputCardNumber">Card
												Number</label> <input type="text" class="form-control"
												id="inputCardNumber" name="number" placeholder="Card number">
										</div>
										<div class="form-group">
											<label class="control-label" for="inputCVV">CVV</label> <input
												type="text" class="form-control" id="inputCVV" name="cvv"
												placeholder="CVV">
										</div>
									</form>
								</div>
								<div class="wizard-pane" id="exampleGetting" role="tabpanel">
									<div class="text-center margin-vertical-20">
										<i class="icon wb-check font-size-40" aria-hidden="true"></i>
										<h4>We got your order. Your product will be shipping soon.</h4>
									</div>
								</div>
							</div>
							<!-- End Wizard Content -->
						</div>
					</div>
					<!-- End Panel Wizard One Form -->
				</div>
			</div>
		</div>
	</div>
	
	
	</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/js/easyui/jquery.easyui.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap/bootstrap.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap/switch/bootstrap-switch.min.js"></script>
<script src="<%=request.getContextPath() %>/js/common/jutil.js"></script>
<!-- Plugins -->
<script src="<%=request.getContextPath() %>/v2/global/vendor/formvalidation/formValidation.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/vendor/formvalidation/framework/bootstrap.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/vendor/jquery-wizard/jquery-wizard.js"></script>
<!-- Scripts -->
<script src="<%=request.getContextPath() %>/v2/global/js/core.js"></script>
<script src="<%=request.getContextPath() %>/v2/assets/js/site.js"></script>
<script src="<%=request.getContextPath() %>/v2/assets/js/sections/menubar.js"></script>

<script src="<%=request.getContextPath() %>/v2/global/js/components/jquery-wizard.js"></script>
<script src="<%=request.getContextPath() %>/v2/global/js/components/matchheight.js"></script>
<%-- <script src="<%=request.getContextPath() %>/v2/assets/examples/js/forms/wizard.js"></script> --%>

<script type="text/javascript">
	jQuery(function(){
		$('#mybookes').datagrid({
			url:jutil.ctxPath +'/book/query_my_books.action',
			fitColumns:true,
			method:'post',
			loadMsg:'查询中，请等候。。。。',
			striped:true,
			fit:true,
			fitColumns:true,
			rownumbers:true,
			pagination:true,
			pageSize:10,
			pageList:[5,10,20,30,50],
			showFooter:true,
			singleSelect:true,
			queryParams: {
				bname:$("#bname").val()
			},
			columns:[[
			{field:'bookName',title:'书名',width:20,align:'center'},
			{field:'chapter',title:'最新章节',width:20,align:'center',formatter:function(value,row,index){
				if(value){
					return value;
				}else{
					return "抓取中..."
				}
			}},
			{field:'updaeTime',title:'最近更新日期',width:20,align:'center'},
			{field:'webName',title:'站点',width:20,align:'center',formatter:function(value,row,index){
					return '<a href="#" onclick="details(\''+row.url+'\')" title="跳转至该网站">'+row.webName+'</a>';
				}
			},
			{field:'id',title:'操作',width:20,align:'center',formatter:function(value,row,index){
						return '<a href="#" onclick = cancelOrder(\''+row.id+'\')>取消订阅</a>';
				}
			}
			]]
		})
		
	})
	//查询所有符合条件的
	function queryAll(){
		$('#mybookes').datagrid("reload",{
			bname:$("#bname").val()
		})
	}
	function initQuery(){
		$("#bname").val("");
		queryAll()
	}
	//订阅
	function order(id){
		jutil.ajax({
			url:"/book/order.action",
			data:{
				id:id
			},
			success:function(data){
				
				if(data.result){
					alert("订阅成功!");
				}else{
					alert("已经订阅!");
				}
				queryAll();
			}
		})
	}
	//取消订阅
	function cancelOrder(id){
		jutil.ajax({
			url:"/book/cancel_order.action",
			data:{
				id:id
			},
			success:function(data){
				
				queryAll();
			}
		})
	}
	(function() {
		// set up formvalidation
		$('#exampleAccountForm')
			.formValidation(
				{
					framework : 'bootstrap',
					fields : {
						username : {
							validators : {
								notEmpty : {
									message : '不能为空!'
								},
								stringLength : {
									min : 1,
									max : 15,
									message : '长度不能超过15'
								},
								regexp : {
									regexp : /^[a-zA-Z0-9_\.]+$/,
									message : '只允许输入数字"_"和"."'
								}
							}
						},
						password : {
							validators : {
								notEmpty : {
									message : '不能为空'
								},
								different : {
									field : 'username',
									message : '密码不能和用户名相同'
								}
							}
						}
					}
				});

		$("#exampleBillingForm").formValidation({
			framework : 'bootstrap',
			fields : {
				number : {
					validators : {
						notEmpty : {
							message : 'The credit card number is required'
						}
					}
				},
				cvv : {
					validators : {
						notEmpty : {
							message : 'The CVV number is required'
						}
					}
				}
			}
		});

		// 初始化向导
		var defaults = $.components.getDefaults("wizard");
		var options = $.extend(true, {}, defaults, {
			buttonsAppendTo : '.panel-body'
		});

		var wizard = $("#exampleWizardForm").wizard(options).data('wizard');

		// setup validator
		// http://formvalidation.io/api/#is-valid
		wizard.get("#exampleAccount").setValidator(function() {
			var fv = $("#exampleAccountForm").data('formValidation');
			fv.validate();
			alert(1)
			if (!fv.isValid()) {
				return false;
			}

			return true;
		});

		wizard.get("#exampleBilling").setValidator(function() {
			alert(2)
			var fv = $("#exampleBillingForm").data('formValidation');
			fv.validate();

			if (!fv.isValid()) {
				return false;
			}

			return true;
		});
		wizard.get("#exampleGetting").setValidator(function() {
			alert(3)
			

// 			if (!fv.isValid()) {
// 				return false;
// 			}

			return true;
		});
	})();
</script>
</body>

</html>
